/**
 * CSS3动画效果样式文件
 * 包含角色动作动画、UI过渡效果和交互动画
 */

// ===== 角色动作动画 =====

/**
 * 角色跑步动画
 * 模拟角色奔跑时的上下起伏动作
 */
@keyframes character-running {
  0%, 100% {
    transform: translateY(0) scaleY(1);
  }
  25% {
    transform: translateY(-2px) scaleY(1.02);
  }
  50% {
    transform: translateY(0) scaleY(0.98);
  }
  75% {
    transform: translateY(-1px) scaleY(1.01);
  }
}

/**
 * 角色跳跃动画
 * 包含起跳、空中和落地阶段
 */
@keyframes character-jump {
  0% {
    transform: translateY(0) scaleY(0.9) scaleX(1.1);
  }
  30% {
    transform: translateY(-40px) scaleY(1.2) scaleX(0.9);
  }
  70% {
    transform: translateY(-60px) scaleY(1.1) scaleX(0.95);
  }
  100% {
    transform: translateY(0) scaleY(0.8) scaleX(1.2);
  }
}

/**
 * 角色滑铲动画
 * 模拟角色滑铲时的姿态变化
 */
@keyframes character-slide {
  0% {
    transform: translateY(0) scaleY(1) scaleX(1) rotate(0deg);
  }
  20% {
    transform: translateY(10px) scaleY(0.6) scaleX(1.4) rotate(-5deg);
  }
  80% {
    transform: translateY(15px) scaleY(0.5) scaleX(1.6) rotate(-8deg);
  }
  100% {
    transform: translateY(0) scaleY(1) scaleX(1) rotate(0deg);
  }
}

/**
 * 角色受伤动画
 * 角色受到伤害时的震动效果
 */
@keyframes character-hurt {
  0%, 100% {
    transform: translateX(0);
    filter: hue-rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-3px);
    filter: hue-rotate(180deg);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(3px);
    filter: hue-rotate(180deg);
  }
}

/**
 * 角色死亡动画
 * 角色死亡时的倒下效果
 */
@keyframes character-death {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  50% {
    transform: rotate(-45deg) scale(0.9);
    opacity: 0.8;
  }
  100% {
    transform: rotate(-90deg) scale(0.7);
    opacity: 0.3;
  }
}

/**
 * 角色胜利动画
 * 角色完成关卡时的庆祝动作
 */
@keyframes character-victory {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  25% {
    transform: translateY(-10px) scale(1.1);
  }
  50% {
    transform: translateY(-5px) scale(1.05) rotate(5deg);
  }
  75% {
    transform: translateY(-8px) scale(1.08) rotate(-5deg);
  }
}

// ===== UI元素过渡动画 =====

/**
 * 淡入动画
 * 元素从透明到不透明的过渡
 */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/**
 * 淡出动画
 * 元素从不透明到透明的过渡
 */
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/**
 * 滑入动画（从上方）
 * 元素从上方滑入视图
 */
@keyframes slide-in-top {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/**
 * 滑入动画（从下方）
 * 元素从下方滑入视图
 */
@keyframes slide-in-bottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/**
 * 滑入动画（从左侧）
 * 元素从左侧滑入视图
 */
@keyframes slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/**
 * 滑入动画（从右侧）
 * 元素从右侧滑入视图
 */
@keyframes slide-in-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/**
 * 缩放进入动画
 * 元素从小到大的缩放效果
 */
@keyframes scale-in {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/**
 * 缩放退出动画
 * 元素从大到小的缩放效果
 */
@keyframes scale-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}

/**
 * 弹跳进入动画
 * 元素带有弹性效果的进入动画
 */
@keyframes bounce-in {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/**
 * 旋转进入动画
 * 元素带有旋转效果的进入动画
 */
@keyframes rotate-in {
  from {
    transform: rotate(-180deg) scale(0);
    opacity: 0;
  }
  to {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

// ===== 悬停和交互动画 =====

/**
 * 按钮悬停动画
 * 按钮悬停时的缩放和阴影效果
 */
@keyframes button-hover {
  0% {
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  100% {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }
}

/**
 * 按钮点击动画
 * 按钮被点击时的压缩效果
 */
@keyframes button-click {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/**
 * 卡片悬停动画
 * 卡片悬停时的浮起效果
 */
@keyframes card-hover {
  0% {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  100% {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }
}

/**
 * 图标旋转动画
 * 图标的持续旋转效果
 */
@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/**
 * 图标脉冲动画
 * 图标的脉冲缩放效果
 */
@keyframes icon-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/**
 * 图标摇摆动画
 * 图标的左右摇摆效果
 */
@keyframes icon-wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

// ===== 游戏特效动画 =====

/**
 * 分数飞出动画
 * 分数增加时的飞出效果
 */
@keyframes score-fly-out {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-20px) scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-40px) scale(0.8);
    opacity: 0;
  }
}

/**
 * 道具收集动画
 * 道具被收集时的效果
 */
@keyframes powerup-collect {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.5) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/**
 * 爆炸效果动画
 * 障碍物被摧毁时的爆炸效果
 */
@keyframes explosion {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/**
 * 闪烁动画
 * 元素的闪烁效果
 */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/**
 * 发光动画
 * 元素的发光脉冲效果
 */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
  }
}

/**
 * 彩虹色彩动画
 * 元素的彩虹色彩变化效果
 */
@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  25% { filter: hue-rotate(90deg); }
  50% { filter: hue-rotate(180deg); }
  75% { filter: hue-rotate(270deg); }
  100% { filter: hue-rotate(360deg); }
}

// ===== 动画工具类 =====

/**
 * 角色动画类
 * 应用于游戏角色的动画效果
 */
.character-animation {
  &.running {
    animation: character-running 0.6s ease-in-out infinite;
  }

  &.jumping {
    animation: character-jump 0.8s ease-out;
  }

  &.sliding {
    animation: character-slide 0.6s ease-in-out;
  }

  &.hurt {
    animation: character-hurt 0.5s ease-in-out;
  }

  &.death {
    animation: character-death 1s ease-in-out forwards;
  }

  &.victory {
    animation: character-victory 1s ease-in-out infinite;
  }
}

/**
 * UI过渡动画类
 * 应用于UI元素的过渡效果
 */
.ui-transition {
  &.fade-in {
    animation: fade-in $transition-normal;
  }

  &.fade-out {
    animation: fade-out $transition-normal;
  }

  &.slide-in-top {
    animation: slide-in-top $transition-normal;
  }

  &.slide-in-bottom {
    animation: slide-in-bottom $transition-normal;
  }

  &.slide-in-left {
    animation: slide-in-left $transition-normal;
  }

  &.slide-in-right {
    animation: slide-in-right $transition-normal;
  }

  &.scale-in {
    animation: scale-in $transition-normal;
  }

  &.scale-out {
    animation: scale-out $transition-normal;
  }

  &.bounce-in {
    animation: bounce-in $transition-slow;
  }

  &.rotate-in {
    animation: rotate-in $transition-normal;
  }
}

/**
 * 交互动画类
 * 应用于可交互元素的动画效果
 */
.interactive-animation {
  transition: $transition-normal;

  &:hover {
    animation: button-hover $transition-fast forwards;
  }

  &:active {
    animation: button-click 0.1s ease-in-out;
  }

  &.card:hover {
    animation: card-hover $transition-normal forwards;
  }
}

/**
 * 图标动画类
 * 应用于图标的动画效果
 */
.icon-animation {
  &.spin {
    animation: icon-spin 1s linear infinite;
  }

  &.pulse {
    animation: icon-pulse 1s ease-in-out infinite;
  }

  &.wiggle {
    animation: icon-wiggle 0.5s ease-in-out infinite;
  }
}

/**
 * 游戏特效动画类
 * 应用于游戏特效的动画效果
 */
.game-effect {
  &.score-fly {
    animation: score-fly-out 1s ease-out forwards;
  }

  &.powerup-collect {
    animation: powerup-collect 0.5s ease-in-out forwards;
  }

  &.explosion {
    animation: explosion 0.8s ease-out forwards;
  }

  &.blink {
    animation: blink 1s ease-in-out infinite;
  }

  &.glow {
    animation: glow 2s ease-in-out infinite;
  }

  &.rainbow {
    animation: rainbow 3s linear infinite;
  }
}

// ===== 性能优化 =====

/**
 * 硬件加速优化
 * 为动画元素启用硬件加速
 */
.hardware-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/**
 * 动画性能优化
 * 减少重绘和重排的动画属性
 */
.optimized-animation {
  will-change: transform, opacity;
}

// ===== 响应式动画 =====

/**
 * 移动端动画优化
 * 在移动设备上减少动画复杂度
 */
@media (max-width: $breakpoint-md) {
  .character-animation {
    &.running {
      animation-duration: 0.8s;
    }

    &.jumping {
      animation-duration: 1s;
    }
  }

  .ui-transition {
    animation-duration: 0.2s !important;
  }

  .game-effect {
    &.explosion {
      animation-duration: 0.5s;
    }
  }
}

/**
 * 减少动画偏好设置支持
 * 为用户提供减少动画的选项
 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .character-animation,
  .ui-transition,
  .interactive-animation,
  .icon-animation,
  .game-effect {
    animation: none !important;
  }
}